import Vue from 'vue'
import Router from 'vue-router'
// import Home from "../components/Home"
// import About from "../components/About"
// import User from "../components/User"

// 通过Vue.use(插件)安装插件
Vue.use(Router)

// 路由懒加载
const Home = () =>  import("../components/Home")
const About = () =>  import("../components/About")
const User = () =>  import("../components/User")
const HomeNews = () =>  import("../components/HomeNews")
const HomeMessage = () =>  import("../components/HomeMessage")
const Profile = () => import("../components/Profile")

const router = new Router({
  routes: [
    {// 默认路径
      path: "/",
      redirect: "/home"
    },
    {
      path: "/home",
      component: Home,
      meta: {
        title: "首页"
      },
      children: [
        // {
        //   path: "/",
        //   component: HomeNews
        // },
        {
          path: "news",
          component: HomeNews
        },
        {
          path: "message",
          component: HomeMessage
        }
      ]
    },
    {
      path: "/about",
      component: About,
      meta: {
        title: "关于"
      }
    },
    {
      path: "/user/:userId",
      component: User,
      meta: {
        title: "用户"
      }
    },
    {
      path: "/profile",
      component: Profile,
      meta: {
        title: "档案"
      },
      beforeEnter: (to, from, next) => { // 路由独享守卫
        console.log("profile beforeEnter");
        document.title = "foo"
        next()
      }
    }
  ],
  mode: "history", // 区别于hash模式
  linkActiveClass: "active",

});

export default router;

// 导航守卫
// 前置守卫(guard):
// router.beforeEach((to, from, next) => {
//   document.title = to.matched[0].meta.title;
//   next()
//   console.log(to);
// })

// 后置钩子(hook):
router.afterEach((to, from) => {
  document.title = to.matched[0].meta.title;
})